/*
 * Copyright 2018 Samsung Electronics Co., Ltd. and other contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Imports.
 */
@import '../variables';
@import 'menu';
@import 'sidenav-extra';
@import 'main-buttons';
@import 'workspace';
@import 'panels';
@import 'editor';

/**
 * Global rules.
 */
html {
  height: 100%;
}

body {
  background-color: $b-background-color;
  word-wrap: normal;
  height: 100%;
  font-size: $font-size-3;
  line-height: 1.4em;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 5px;
}

pre {
  display: block;
  margin: 0;
  padding: 0 10px 0 0;
  font-family: monospace;
  font-size: inherit;
  color: inherit;
  word-break: break-all;
  word-wrap: break-word;
  background-color: transparent;
  border: none;
  border-radius: 0;
  overflow: unset;
}

.hidden {
  display: none !important;
}

.pure {
  margin-top: 0;
  margin-bottom: 0;
}

.separated {
  margin: 0 20px;
}

.data {
  white-space: pre-wrap;
}

.form-control {
  width: auto;
  display: inline-block;
}

.panel {
  margin-bottom: 0;
}

input[type="number"] {
  width: 200px;
}

.bg-white {
  background-color: $b-background-color !important;
}

.bg-warning {
  background-color: $b-yellow-color !important;
}

.bg-success {
  background-color: $b-green-color !important;
}

.bg-danger {
  background-color: $b-red-color !important;
}

input[type="text"].form-control,
input[type="number"].form-control,
select.form-control {
  height: 28px !important;
  padding: 2px 2px 2px 4px !important;
  line-height: 24px !important;
}

input[type="text"].form-control,
input[type="number"].form-control,
select.form-control,
.btn.form-control {
  border-radius: 2px;
}

.btn-default {
  background-color: #fff;
  &.disabled:hover {
    background-color: #fff;
  }
}

/**
 * Common rules.
 */
#main-wrapper {
  position: relative;
  margin-left: $menu-icon-width;
  padding: 4px 4px 0 4px;
  height: $default-main-wrapper-height;

  /**
   * Popup window rules.
   */
  #popup-wrapper {
    z-index: $z-level-6;
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 450px;
    margin: 20px 50px;

    div {
      position: relative;
      min-height: 60px;
      min-width: 320px;
      box-shadow: $default-popup-shadow;
      padding-top: 20px;
      padding-left: 50px;

      i {
        font-size: $font-size-8;
        position: absolute;
        top: 15px;
        left: 15px;
      }
    }
  }
  #container {
    z-index: $z-level-8;
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $default-modal-color;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container.active {
    visibility: visible;
  }
  #container-content {
    overflow: auto;
    background-color: $menu-background-color;
    border: 1px solid $menu-border-color;
    color: $menu-text-color;
    width: 50%;
    height: 50%;
    padding: 15px;
    ul {
      list-style-type: none;
      padding: 0px;
    }
    li {
      line-height: 1.5;
    }
    li:hover {
      color: $menu-foreground-color;
      cursor: pointer;
    }
    &::-webkit-scrollbar {
      background-color: $menu-background-color;
    }
    &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
      background-color: $menu-border-color;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 40%;
    }
  }

}

footer p {
  padding: 0;
  margin: 0;
  font-size: $font-size-1;
}
